<template>
  <PageDialog
    :title="title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="formInfo.ref"
      :data="formInfo.data"
      :field-list="formInfo.fieldList"
      :rules="formInfo.rules"
      :label-width="formInfo.labelWidth"
    >
      <template v-slot:form-monthName>
        <el-select
          v-model="formInfo.data.monthName"
          filterable
          style="width: 100%"
          placeholder="请选择月份"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </template>
    </page-form>
  </PageDialog>
</template>
<script setup name="proportion">
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const formInfo = ref({
  ref: null,
  data: { monthName: '' },
  fieldList: [
    {
      label: '月份',
      value: 'monthName',
      type: 'slot',
    },
  ],
  rules: {
    monthName: [{ required: true, message: '请选择月份', trigger: 'change' }],
  },
  labelWidth: '80px',
})
// 弹窗相关
const dialogInfo = ref({
  width: '400px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      show: true,
    },
  ],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      emits('callback', formInfo.value.data.monthName, () => {
        handleClose()
      })
    }
  })
}

function handleClose() {
  shows.value = false
  emits('reset')
}
</script>

<style scoped lang="scss"></style>
